<template>
  <div style="width:100%;">
    <el-row v-if="param.showToolButton" style="text-align:right;line-height:30px" :gutter="3">
      <el-col :span="param.toolButtonSpan" style="text-align: left">
        <el-button v-for="row in param.toolButtons" :key="row.id" class="tool_button" @click="row.operateFunction()" :type="row.type" size="mini" :icon="row.icon" v-if="row.permission === '' ? true : (param.permissions.indexOf(row.permission)>0)" plain>{{row.title}}</el-button>
      </el-col>
      <el-col :span="param.toolSearchSpan">
        <div>
          <el-row :gutter="8">
            <el-col :span="item.span" v-for="item in param.toolSearchItems" :key="item.prop">
              {{item.label}}:
              <!-- 一般输入框-->
              <el-input v-model="yfuSearch[item.prop]" size="mini" v-if="item.type=='input'"  class="inputClass" clearable></el-input>
              <!-- SELECT选择框静态数据-->
              <el-select v-model="yfuSearch[item.prop]" filterable clearable  placeholder="请选择" v-if="item.type=='select'"  size="mini" class="inputClass">
                <el-option
                  v-for="option in item.options" :option="option"
                  :key="option[item.valueName]"
                  :label="option[item.labelName]"
                  :value="option[item.valueName]">
                </el-option>
              </el-select>
              <!-- SELECT选择框远程搜索-->
              <el-select v-model="yfuSearch[item.prop]" filterable clearable   placeholder="请选择" v-if="item.type=='selectsearch'"   size="mini" class="inputClass">
                <el-option
                  v-for="option in item.options" :option="option"
                  :key="option[item.valueName]"
                  :label="option[item.labelName]"
                  :value="option[item.valueName]">
                </el-option>
              </el-select>
              <!--date-->
              <el-date-picker type="date" placeholder="选择日期" v-model="yfuSearch[item.prop]" v-if="item.type=='date'"
                              style="width:140px" size="mini" value-format="yyyy-MM-dd"></el-date-picker>
              <!--dateRange-->
              <el-date-picker
                v-model="yfuSearch[item.prop]"
                value-format="yyyy-MM-dd HH:mm:ss"
                :default-time="['00:00:00', '23:59:59']"
                type="daterange"
                unlink-panels
                v-if="item.type=='daterange'"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期" size="mini" style="width:200px">
              </el-date-picker>
            </el-col>

          </el-row>
        </div>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" size="mini" icon="el-icon-search" plain @click="playsSearch"  >搜索</el-button>
      </el-col>
    </el-row>

    <div >
      <el-table
        ref="organizationUserTable"
        :data="datas"
        tooltip-effect="dark"
        :stripe="true"
        :border="true"
        size="mini"
        @selection-change="changeFun"
        @row-click="rowClick"
        empty-text="没有数据"
        header-row-class-name="organizationTableHeadCss"
        :highlight-current-row="param.highlight"
        style="width: 100%;margin-top:20px;">

          <el-table-column v-if="param.showBox"
                           type="selection"
                           width="55">
          </el-table-column>

          <el-table-column
            label="序号"
            type="index"
            :index="indexMethod"
          >
          </el-table-column>

        <el-table-column  v-for="row in param.rows" :key="row.prop"  :label="row.label" :prop="row.prop" :width="row.width" :formatter="row.formatter">
        </el-table-column>

        <el-table-column
          label="操作"
          :width="param.operateRow.width" v-if="param.showOperateRow">
          <template slot-scope="scope">
            <!--<i @click="operateButton.operateFunction(scope.row)" v-for="operateButton in param.operateButtons" :key="operateButton.icon" :operateButton="operateButton" ></i>-->
            <i @click="operateButton.operateFunction(scope.row)" v-for="operateButton in param.operateButtons" :key="operateButton.icon" :operateButton="operateButton" v-show="operateButton.permission === '' ? true : (param.permissions.indexOf(operateButton.permission)>0)">
              <icon :name="operateButton.icon" :scale="2" class="pointcss" ></icon> &nbsp;&nbsp;
            </i>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="margin-top:10px;text-align: center">
      <!--v-show="permissions.indexOf(operateButton.permission)>0"-->
      <el-pagination :small="param.nvsmall == null ? nvsmall : param.nvsmall" background :layout="param.nvlayout==null?nvlayout:param.nvlayout" :total="totals" :current-page="currentPage" v-on:current-change="pageChange">
      </el-pagination>
    </div>
  </div>
</template>
<script >
  import {tfGet, yfuPost} from '@/utils/request.js'
  import global_ from '@/utils/global.vue'
//  import store from '@/store'
  export default {
    props: ['param'],
    data () {
      return {
        yfuSearch: {},
        permissions: this.sessiongetString('permissions'),
        datas: [],
        currentPage: 1,
        totals: 0,
        cheeckedDatas: [],
        nvsmall: false,
        nvlayout: 'total,prev, pager, next,jumper'
      }
    },
    watch: {
      refresh: function () {
        // 响应刷新
        this.refreshTable()
      }
    },
    // 进入时初始化TABLE
    created () {
      if (this.param.noCreatedRequest === 1) {
        return
      }
      this.initSearch()
      this.initTable()
    },
    methods: {
      indexMethod (index) {
        index += 1
        let cp = this.currentPage - 1
        let indexValue = index + cp * 10
        return indexValue
      },
      initTable () {
        this.refreshTable()
      },
      // 赋值
      assignData (data) {
        if (Array.isArray(data)) {
          this.datas = data
        } else {
          this.datas = data.list
          this.currentPage = data.currentPage
          this.totals = data.totals
        }
      },
      // 得到数据
      getAllDatas (param1) {
        let cThis = this
        if (global_.isLocalServer) {
          tfGet(this.param.url, function (data) {
            cThis.assignData(data)
          })
        } else {
          yfuPost(this.param.baseURL, this.param.url, param1, function (data) {
            console.log(data)
            cThis.assignData(data)
          })
        }
      },
      // 页数改变时调用
      pageChange (toPage, outerParam) {
        if (toPage < 1) {
          toPage = 1
        }
        let param1 = this.createParam(outerParam)
        param1.currentPage = toPage
        param1.pageSize = 10
        console.log(param1)
        this.getAllDatas(param1)
      },
      refreshTable (outerParam) {
        this.pageChange(1, outerParam)
      },
      refreshTableClearSearch (outerParam) {
        this.yfuSearch = {}
        this.pageChange(1, outerParam)
      },
      //  点击搜索时调用
      playsSearch () {
        this.refreshTable()
      },
      changeFun (val) {
        this.cheeckedDatas = val
        this.$emit('getCheckedRows', val)
      },
      getCheckedRows () {
        return this.cheeckedDatas
      },
      rowClick (row) {
        this.$emit('getClickRows', row)
      },
      // 构建参数
      createParam (outerSearchParam) {
        let param1 = {}
        if (this.param.urlParam != null) {
          for (let key of Object.keys(this.param.urlParam)) {
            param1[key] = this.param.urlParam[key]
          }
        }
        if (outerSearchParam != null && outerSearchParam !== undefined) {
          for (let key1 of Object.keys(outerSearchParam)) {
            param1[key1] = outerSearchParam[key1]
          }
        }
        if (this.param.showToolButton) {
//          for (let key2 of Object.keys(this.yfuSearch)) {
//            param1[key2] = this.yfuSearch[key2]
//          }
          for (let param2 of this.param.toolSearchItems) {
            if (param2.type === 'daterange') {
              let rangeTime = this.yfuSearch[param2.prop]
              if (rangeTime != null && rangeTime.length > 0) {
                if (param2.times) {
                  param1[param2.times[0]] = rangeTime[0]
                  param1[param2.times[1]] = rangeTime[1]
                } else {
                  param1.beginTime = rangeTime[0]
                  param1.endTime = rangeTime[1]
                }
              }
            } else {
              if (this.yfuSearch[param2.prop] != null) {
                param1[param2.prop] = this.yfuSearch[param2.prop]
              }
            }
          }
        }
        return param1
      },
      initSearch () {
        if (this.param.toolSearchItems) {
          for (let param2 of this.param.toolSearchItems) {
            if (param2.type === 'selectsearch') {
              let uparam = {}
              if (global_.isLocalServer) {
                tfGet(param2.url, function (data) {
                  if (Array.isArray(data)) {
                    param2.options = data
                  } else {
                    param2.options = data.datas
                  }
                })
              } else {
                yfuPost(this.param.baseURL, param2.url, uparam, function (data) {
                  if (Array.isArray(data)) {
                    param2.options = data
                  } else {
                    param2.options = data.datas
                  }
                })
              }
            }
          }
        }
      }
    }
  }
</script>

<style >
  .el-input-group .el-select .el-input {
    width: 100px;
  }

</style>
